<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button id="btn1">开始</button>
    <button id="btn2">添加交互队列</button>
    <script>
        let btn1=document.getElementById('btn1')
        let btn2=document.getElementById('btn2')

        // 延迟duration一段时间
        function delay(duration){
            let start=Date.now()
            while(Date.now()-start<duration){}
        }

        function addDelay(){
            console.log('添加延时队列（计时器队列）');
            setTimeout(()=>{
                console.log('延时队列任务执行');
            },200)
            delay(2000)  // 等待2秒，此时计时器的回调已放入延时队列中
        }

        function addIntersection(){
            console.log('添加交互队列');
            btn2.onclick=function(){
                console.log('交互队列任务执行');
            }
            delay(2000) // 等待2秒，用户在这2秒内点击按钮，则回调会放到交互队列中
        }

        btn1.onclick=function(){
            addDelay()
            addIntersection()
            console.log('----------');
        }
    </script>
</body>

</html>